{extends file="../global.html"}
{block name=body}
 
 
 <div class="main" id="car-detail" >
<div class="banner-big hidden-md hidden-sm hidden-lg j-big-img" >
<div class="swiper-container h5-banner r-height" data-length=" 31 ">
<div class="swiper-wrapper">
{foreach $reuslt.goods_pictures as $v}
<div class="swiper-slide" style="max-height: 255px;">
 

<div class="fix-img r-height" style="background-image: url({$absroot}{$v})"> 
	 
</div>
</div>
{/foreach}

 



</div>
<!-- Add Pagination -->
<div class="swiper-pagination noApp"></div>
</div>

</div>
<div class="box-flex c-width base-info">
<div class="banner-big fix-img hidden-xs" style="background-image: url({$absroot}{$reuslt.goods_pictures[0]});">

<div class="image-count pointer">
&nbsp;&nbsp;<img src="{$home}images/icon_view_2x.png" height="24" alt="">&nbsp;&nbsp;查看 {$reuslt.goods_pictures|@count} 张图
</div>
</div>
<div class="flex-1">
<div class="car-info h5-margin">
<div class="base">
<h1 class="ft-18 ft-weight base-title"> {$reuslt.goods_model}款 {$reuslt.goods_name} {$reuslt.goods_describe} {$reuslt.goods_car} </h1>
<div class="hidden-xs" style="height: 45px;">
<div class="switch-box">

</div>
<div class="price">
<div class=" pull-right pointer hidden-xs ft-sm ft-gray3 guanzhu" data-id="" data-modelcode="">
<img class="attention-cancle is-guanzhu" src="{$home}images/attention-icon.png" width="16" alt="" data-goods-id="{$reuslt.goods_id}">&nbsp;关注

<!-- <img class="attentioned" src="{$home}images/attention-yet-icon.png" width="16" alt="">  -->
</div>
<!--　切换车型-->

<div class="ft-gray3 ft-sm guidance"> 厂商指导价： {$reuslt.goods_price}万</div>
<div class="ft-gray3 ft-sm mianze">车图仅供参考，以车辆配置描述为准</div>
</div>
</div><div class="border-bottom margin-border"></div>
<div class="down-payment">
<div class="payment">
<div class="pull-right">
<div class="ft-left payment-price">
<div class="ft-orange ft-18">
<span class="p-padding">首付</span>
<span class="pull-right">{$reuslt.goods_payment}元</span>
</div>
<div class="ft-orange ft-18">
<span class="p-padding">月供</span>
<span class="pull-right">{$reuslt.goods_month}元</span>
</div>
</div>
<div class="labels pull-right">
<div class="label ft-sm ft-orange">含购置税</div>
<div class="label ft-sm ft-orange">送1年保险</div>
</div>
</div>
<div class="ft-16"> 先用一年 </div>
</div>
<div class="ft-sm ft-gray3 ft-right">
<span> 根据蚂蚁金服个人信用评估，首付不同&nbsp; </span>
<span id=" " class="ft-blue pointer" onclick="seeDetails()"> 查看详情 </span>
</div>
</div>
<div class="border-bottom"></div>
<div class="pay-final">
<div class="pull-right ft-right">
<div class="ft-16">
 {$reuslt.goods_retainage}元
</div><div class="pay-height"></div>
<div class="ft-sm ft-gray3">
尾款也可分期 8375元 × 36个月
</div>
</div>
<div class="ft-16">尾款购车</div>
</div>
<div class="border-bottom"></div><div class="bottom-button hidden-xs">
<div class="btns pull-right ft-gray phone ft-sm">
<div>
4000-000-000</div>
<div>服务电话</div>
</div>

{if $isYuYue.goods_id==$reuslt.goods_id}
<div class="btns ft-16 appointment" style="background-color:#5CB85C;color:#fff;">已预约</div>
 
{elseif $reuslt.goods_status==0}


<div class="btns ft-16 appointment yuyue-success" id="appointment-modal" >
预约到店</div>


{else}
<div class="btns ft-16 appointment buhuo" style="background-color: #b2b6c2;">
补货中</div>
{/if}


 
</div>
</div>
</div>
</div>
</div><br>
<!-- {pr($reuslt)} -->
<div class="container logo c-width">
<div class="row">
<div class="col-md-12">
<div class="ft-center">
<h2 class="fn-hide">信用购车 先用后买</h2>
<img class="hidden-xs lazy" data-original=" //assets.souche.com/projects/finance/vanille/images/detail/pc-buy-car.png?BIU=cf954163c03788ede852ac4703fe341f " width="100%" alt="信用购车 先用后买">
<img class="hidden-md hidden-lg hidden-sm lazy" data-original=" //assets.souche.com/projects/finance/vanille/images/detail/h5-buy-car.png?BIU=ca1a20b6aad753a7cbd9bb28aa18b243 " width="100%" alt="像谈恋爱一样弹个车，想开就开/想买就买/想换就换">
<img class="hidden-xs lazy" data-original=" //assets.souche.com/projects/finance/vanille/images/detail/web_banner.png?BIU=724fdc2efdd1001b019e372942d3f927 " width="100%" alt="像谈恋爱一样弹个车，想开就开/想买就买/想换就换">
</div>
</div>
</div>
</div><div class="container c-width">
<div class="compare ft-md">
<div class="row head">
<div class="col-md-6 col-sm-6 col-xs-6">
<h2 class="left ft-24 ft-center hidden-xs">贷款买车</h2>
<h2 class="left ft-16 ft-center hidden-md hidden-sm hidden-lg">贷款买车</h2>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="right ft-24 ft-center hidden-xs">爱车易得</div>
<div class="right ft-16 ft-center hidden-md hidden-sm hidden-lg">爱车易得</div>
</div>
<img data-original=" //assets.souche.com/projects/finance/vanille/images/detail/vs_big_2x.png?BIU=2f3ded6b18516912760fd69d2c143e55 " class="vs lazy" alt="">
</div>
<div class="border-bottom">
<div class="row ft-center">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">门槛高</div>
<div class="hidden-md hidden-lg hidden-sm ft-sm ft-gray">
<div>首付30%起</div>
<div>加上购置税和保险</div>
<div>将近一半车款</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>首付30%起，加上购置税和保险</div>
<div>将近一半车款</div>
<div class="p-height"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">门槛低</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>首付最低32500元</div>
<div>含购置税</div>
<div>送1年保险</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>首付最低32500元</div>
<div>含购置税，送1年保险</div>
<div class="p-height"></div>
</div>
</div>
</div>
</div>
<div class="border-bottom">
<div class="row ft-center">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">月供高</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>付完首付每月吃土</div>
<div>算上月供更是雪上加霜</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div> 付完首付每月吃土，算上月供更是雪上加霜 </div>
<div class="p-height"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">月供低</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>第1年用车月供</div>
<div>7698元</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>第1年用车月供7698元</div>
<div class="p-height"></div>
</div>
</div>
</div>
</div>
<div class="border-bottom">
<div class="row ft-center">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">换车难</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>新车落地就掉价</div>
<div>1年小改款</div>
<div>3年就换代</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>新车落地就掉价</div>
<div>1年小改款，3年就换代</div>
<div class="p-height"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">轻松换好车</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>用车满1年</div>
<div>续租、购买、退还</div>
<div>三种方式任您选择</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>用车满1年，续租、购买、退还</div>
<div>三种方式任您选择</div>
<div class="p-height"></div>
</div>
</div>
</div>
</div>
<div class="row ft-center">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">手续繁琐</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>提供收入证明</div>
<div>社保证明</div>
<div>审批通过率低</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>提供收入证明、社保证明</div>
<div>审批通过率低</div>
<div class="p-height"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="compare-title ft-16">手续便捷</div>
<div class="hidden-sm hidden-md hidden-lg ft-sm ft-gray">
<div>支付宝扫码征信</div>
<div>秒批秒贷，全程代办</div>
<div>坐等提车</div>
<div class="p-height"></div>
</div>
<div class="hidden-xs">
<div>支付宝扫码征信</div>
<div>秒批秒贷，全程代办，坐等提车</div>
<div class="p-height"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="hidden-md hidden-lg hidden-sm border-bottom"><div class="container car-config ft-16 c-width">
<div class="row title">
<h2 class="col-md-6 col-sm-6 col-xs-6 ft-32 hidden-xs"> 车辆配置 </h2>
<h2 class="col-md-6 col-sm-6 col-xs-6 ft-18 hidden-md hidden-sm hidden-lg"> 车辆配置 </h2>
<div class="col-md-6 col-sm-6 col-xs-6 ft-right right-link ft-md">
 
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
车身结构</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_structure}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
长/宽/高</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_size}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
发动机</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_engine}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
变速箱</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_gearbox}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
驱动方式</div>
<div class="col-md-8 col-sm-8 col-xs-8">
前置前驱</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
燃料形式</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_fuel}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
综合油耗</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_oil}</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="border-bottom">
<div class="row config">
<div class="col-md-3 col-sm-4 col-xs-4 ft-gray3">
车辆配色</div>
<div class="col-md-8 col-sm-8 col-xs-8">
{$reuslt.car_color}</div>
</div>
</div>
</div>
</div>
</div><!--配置亮点-->
<hr class="hidden-md hidden-lg hidden-sm app border-top">

<!--口碑印象-->
<!--车型亮点-->
<hr class="hidden-md hidden-lg hidden-sm border-bottom">
<div class="container car-highlights ft-16 c-width">
<div class="row title">
<h2 class="col-md-12 ft-32 hidden-xs"> 车型亮点</h2>
<h2 class="col-md-12 ft-18 hidden-md hidden-lg hidden-sm"> 车型亮点</h2>
</div>

{$i = 0}
{foreach $reuslt.goods_highlights as $value}
{$i =$i+1}
{if $i %2 != 0}

<div class="row">
<div class="col-md-12">
<div class="bg-gray">
<div class="row">
<div class="col-md-6 col-sm-6 info-right-img hidden-xs">
<img class="lazy" data-original="{$absroot}{$value.car_img}" width="100%" alt="{$value.car_title}">
</div>
<div class="col-md-6 col-sm-6 hidden-md hidden-lg hidden-sm">
<img class="lazy" data-original="{$absroot}{$value.car_img}" width="100%" alt="{$value.car_title}">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="info">
<div class="padding-h hidden-xs"></div>
<div class="info-title"> {$value.car_title}  </div>
<div class="info-text ft-gray3"> {$value.car_content} </div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
{elseif $i %2 == 0}
 
<div class="row">
	<div class="col-md-12">
		<div class="bg-gray">
			<div class="row">
				<div class="col-md-6 col-sm-6 hidden-md hidden-lg hidden-sm">
				<img class="lazy" data-original="{$absroot}{$value.car_img}" width="100%" alt="{$value.car_title}">
				</div>
				<div class="col-md-6 col-sm-6">
				<div class="info">
				<div class="padding-h hidden-xs"></div>
				<div class="info-title"> {$value.car_title} </div>
				<div class="info-text ft-gray3"> {$value.car_content} </div>
				</div>
				</div>
				<div class="col-md-6 col-sm-6 info-left-img hidden-xs">
				<img class="lazy" data-original="{$absroot}{$value.car_img}" width="100%" alt="{$value.car_title}">
				</div>
			</div>
		</div>
	</div>
</div>
<br>

{/if}
{/foreach}

 
</div>
<hr class="border-bottom">
<div class="container store-info c-width" id="shop-page-contain">
<div class="row title">
<h2 class="col-md-6 col-sm-6 col-xs-6 ft-32 hidden-xs"> 门店信息</h2>


<h2 class="col-md-6 col-sm-6 col-xs-6 ft-18 hidden-md hidden-lg hidden-sm"> 门店信息</h2>



</div>
<div class="row" id="detail-pc-contain">
<div class="panel panel-default" style="border:none;">
 {foreach $res as $v}
	<div class="col-md-4" >
		<div style="border:1px solid #e6e6e6;height: 140px;padding:15px;background:#EFEFEF;position: relative;">
			<p style="line-height: 50%;">
			<img src="{$home}images/map-img.png" alt="" width="21" style="color: #FF571A">&nbsp;{$v.store_company}
			<span class="pull-right" ><img src="{$home}images/temai.png" width="40"></span>
			</p>
			<p style="font-size: 14px;color:#666;">{$v.store_name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {$v.store_phone}</p>
		 
		 	
			
			<p style="position: absolute;bottom:10px;"><a href="http://api.map.baidu.com/geocoder?address={$v.store_name}&output=html&src=yourCompanyNa" target="_blank">查看地图</a></p>
		</div>
		
	</div>
{/foreach}
	
 
</div>
</div>
</div>
<hr class="">


<hr class="border-bottom">

<div class="container c-width">
<div class="row title">
<h2 class="col-md-12 ft-32 hidden-xs">购车流程 </h2>
<h2 class="col-md-12 ft-18 hidden-md hidden-lg hidden-sm"> 购车流程</h2>
</div>
<div class="flow" style="margin-bottom: 0;">
<img class="hidden-lg hidden-md hidden-sm lazy" data-original=" //assets.souche.com/projects/finance/vanille/images/detail/image_process_3x.png?BIU=ea7a068511f7c307ea464dfd20d38556 " width="100%" alt="">
<img class="hidden-xs lazy" data-original=" //assets.souche.com/projects/finance/vanille/images/common/buycar_process_3x.png?BIU=f8fcb365a9019adfc4fac3140856d34a " width="510" alt="">
<div class="h5-tips">温馨提示：您除车价外，您提车的门店会收取
5000元提车服务费，此费用由门店收取，请知悉！
</div>
</div>
</div>
<div class="container store-info c-width" id="shop-page-contain">
<div class="row title">
<h2 class="col-md-6 col-sm-6 col-xs-6 ft-32 hidden-xs"> 热门推荐</h2>


<h2 class="col-md-6 col-sm-6 col-xs-6 ft-18 hidden-md hidden-lg hidden-sm"> 热门推荐</h2>



</div>
<div class="row" id="">
 
	{foreach $randgoods as $k=>$v}
	<div class="col-md-3 col-sm-6 col-xs-12" style="margin-bottom: 50px;" onclick="goodsView({$v.goods_id})">
		<div class="bor-e6 hover-rand">
			
			<img src="{$absroot}{$v.goods_pictures[0]}" alt="" class="img-responsive">
			<div style="padding:0 22px;">
				<p class="ft-col-1a">{$v.goods_name}</p>
				<p class="ft-col-1a" style="padding: 4px 0;">{$v.goods_model}款 {$v.goods_describe} {$v.goods_car}</p>
				<p class="col-back" >指导价{$v.goods_price}万起</p>
				<p class="" style="padding: 10px 0 20px 0;"><span class="col-j">首付 <span class="ft-20 ft-we">{$v.goods_payment}</span>万</span>&nbsp;&nbsp;&nbsp;<span class="col-back">月供{$v.goods_month}元</span></p>
			</div>
			
		</div>

		
	</div>
	{/foreach}
	
 
	
 
</div>
</div>
</div>
 

<div class="hidden-md hidden-lg hidden-sm">
<div id="h5-footer" style="z-index: 99999">

<div class="box-flex border-top ft-center ft-16 app ft-weight fn-hide">
<div class="phone border-right">
<a href="tel:4008010010" id="j-tel">
<img class="attention-cancle" src="{$home}images/h5_phone_3x.png" width="22" alt="">
</a>
</div>
 
</div>

<div class="box-flex noApp attention-height ft-weight fn-hide">
<!-- H5关注 -->
<div class="attention-icon border-top guanzhu "  data-goods-id="{$reuslt.goods_id}">
<img class="attention-cancle is-guanzhu" src="{$home}images/attention-icon.png" width="24" alt="" ata-goods-id="{$reuslt.goods_id}">
<!-- <img class="attentioned" src="{$home}images/attention-yet-icon.png" width="24" alt=""> -->
</div>
<div class="flex-1 ft-center phone bg-black ft-16">
<a href="tel:4008010010" >
<img class="" src="{$home}images/call_white.png" width="22" alt="">
<span>4000-000-000</span>
</a>
</div>
{if $isYuYue.goods_id==$reuslt.goods_id}

<div class="flex-1 ft-center ft-16" style="background-color: #5CB85C;color:#fff;">已预约</div>
 
{elseif $reuslt.goods_status==0}


<div class="flex-1 ft-center ft-16 yuyue-success appointment-modal" style="background-color: #46a8ef;" id="">预约到店</div>



{else}
<div class="flex-1 ft-center ft-16 buhuo" style="background-color: #b2b6c2;">补货中</div>


{/if}

</div>
</div>
</div>

<div class="close" id="banner-mask">
<div class="close pointer">
<img src="{$home}images/icon_viewclose_2x.png" width="32" alt="">
</div>
<div class="content">
<div class="swiper-container carousel">

<div class="swiper-wrapper">
<!-- pc大图 -->
{foreach $reuslt.goods_pictures as $pic}
<div class="swiper-slide">
<div class="swp-image" style="background-image: url({$absroot}{$pic});"> </div>
</div>
{/foreach}
<!-- 大图+end -->

<div class="swiper-pagination" style="background:url('{$home}images/background_viewlayout.png') repeat-x"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>



</div>

<div class="swiper-container thumbs">
<div class="swiper-wrapper">

<!-- pc小缩略图 -->
{foreach $reuslt.goods_pictures as $pic}
<div class="swiper-slide">
<img src="{$absroot}{$pic}" width="100%" width="80" height="60" alt="">
</div>
{/foreach}
<!-- 小缩略图——end -->
</div>
</div>


</div>
</div>
<input type="hidden" value="{$reuslt.goods_id}" name="goods_id">


 

<div id="allmap"></div>
<!--  -->

<script src="{$home}js/fang/common.js"></script>
<!-- <script src="{$static}jquery-1.11.1.min.js"></script> -->

<script type="text/javascript" src="{$home}js/fang/jquery.datetimepicker.full.min.js"></script>

<script type="text/javascript" src="{$home}js/fang/swiper-3.4.0.jquery.min.js"></script>
<script type="text/javascript" src="{$home}js/fang/detail.js"></script>



<script type="text/javascript">
function seeDetails(){
	layer.open({
	  type: 1,
	  title: false,
	  closeBtn: 0,
	  area: ['40%', '20%'], //宽高
	  shadeClose: true,
	  content: '首付比列'
	});
}


var yuyueSession = '{$session}',
	goodsId = '{$reuslt.goods_id}';

 {if $isFollow.goods_id==$reuslt.goods_id}
 $('.attention-cancle').attr('src','{$home}images/attention-yet-icon.png').removeClass('is-guanzhu').addClass('no-guanzhu');
 {/if}
$('.guanzhu').unbind('click').bind('click',function(){
	// alert(yuyueSession);
	// $("#myModal").modal('show');
	ajax({
		url:"{url('home/type/isSession')}",

		type:"GET",
	 
		dataType: "json",
		success:function(response, xml){
			if(response==1){
				$("#myModal").modal('show');
			}
			else{
				 
			  
			if($('.guanzhu').find('.attention-cancle').hasClass('is-guanzhu')){

				ajax({
					url:"{url('home/Follow/ajaxFollow')}",

					type:"GET",
					data:{ goods_id:goodsId,
							user_phone:response
					},
					dataType: "json",

					success:function(response, xml){
						if(response==1){
							$('.guanzhu').find('.attention-cancle').attr('src','{$home}images/attention-yet-icon.png').removeClass('is-guanzhu').addClass('no-guanzhu');
						}
					}
				})
			}
			else{
			 	 
				ajax({
					url:"{url('home/Follow/delFollow')}",

					type:"GET",
					data:{ user_phone:yuyueSession,
							goods_id:goodsId
					},
					dataType: "json",
					success:function(response, xml){
					 	if(response==1){
				 				$('.guanzhu').find('.attention-cancle').attr('src','{$home}images/attention-icon.png').addClass('is-guanzhu');
				 			}
					}
				})
			}
			}
		}
	}) 
})

	function goodsView(goodsId){
		// alert(goodsId);
		 location.href="{$absroot}Details/"+goodsId;
	}
</script>
{/block}